<template>
  <div>
    <div>
      <FormPanel
        :list="formList"
        formType="add"
        labelWidth="100"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      />
      <FilterTable
        ref="table"
        height="300"
        :columns="columns"
        :dataSource="list"
        :onColumnsChange="columns => this.columns = columns"
      >
        <template slot="moreActions">
          <span @click="delRowsHandle">批量删除</span>
        </template>
        <template slot="controls" slot-scope="props">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            :disabled="isDisabled"
            @click="visible = true"
          >新增产品</el-button>
        </template>
      </FilterTable>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer">取 消</el-button>
      <el-button @click="closeDrawer" type="primary">提 交</el-button>
    </div>
    <BaseDialog
      :visible.sync="visible"
      title="产品查询"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <ProdPanel @change="changeHandle" @close="closeHandle" />
    </BaseDialog>
  </div>
</template>

<script>
import moment from 'moment';
import { queryRebateAccounte } from '@/api/vehicle/order/maintain';
import { dictionary } from '@/utils/dictMixin';
import ProdPanel from './ProdPanel';

export default {
  name: 'OrderPanel',
  mixins: [dictionary],
  components: {
    ProdPanel
  },
  data() {
    this.BaseTable = null;
    return {
      visible: false,
      formList: this.createFormList(),
      isDisabled: true,
      selectedRows: [],
      list: [],
      columns: this.createTableColumns()
    };
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '订单编号',
          fieldName: 'orderNo',
          disabled: true
        },
        {
          type: 'DATE',
          label: '当前年月',
          fieldName: 'currentDate',
          placeholder: '选择日期',
          initialValue: moment().format('YYYY-MM-DD'),
          disabled: true
        },
        {
          type: 'SELECT',
          label: '订单状态',
          fieldName: 'orderStatus',
          placeholder: '请选择',
          itemList: this.createDictList('4008'),
          initialValue: 40081001,
          disabled: true
        },
        {
          type: 'SELECT',
          label: '订单类型',
          fieldName: 'orderType',
          placeholder: '请选择',
          change: val => {
            this.isDisabled = val === '0' || !val;
          },
          itemList: this.createDictList('4005'),
          rules: [{ required: true, message: '请选择订单类型', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '运输方式',
          fieldName: 'shippingType',
          placeholder: '请选择',
          itemList: this.createDictList('4006'),
          rules: [{ required: true, message: '请选择运输方式', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '资金类型',
          fieldName: 'fundType',
          placeholder: '请选择',
          itemList: this.createDictList('4007'),
          rules: [{ required: true, message: '请选择资金类型', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '使用返利',
          fieldName: 'discountType',
          placeholder: '请选择',
          itemList: this.createDictList('1004'),
          rules: [{ required: true, message: '请选择使用返利', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '订单金额',
          unit: '元',
          fieldName: 'orderAmount',
          placeholder: '订单金额...',
          initialValue: 0,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '资金金额',
          unit: '元',
          fieldName: 'fundAmount',
          placeholder: '资金金额...',
          initialValue: 0,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '使用返利金额',
          unit: '元',
          fieldName: 'usedDiscount',
          placeholder: '使用返利金额...',
          initialValue: 0,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '返利池余额',
          unit: '元',
          fieldName: 'discountAmount',
          placeholder: '返利池余额...',
          initialValue: 0,
          numberFormat: true,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '国地补金额',
          unit: '元',
          fieldName: 'subsideAmount',
          placeholder: '国地补金额...',
          initialValue: 0,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '政策折扣金额',
          unit: '元',
          fieldName: 'policyAmount',
          placeholder: '政策折扣金额...',
          initialValue: 0,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '特殊折扣金额',
          unit: '元',
          fieldName: 'specialAmount',
          placeholder: '特殊折扣金额...',
          initialValue: 0,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '实付金额',
          unit: '元',
          fieldName: 'totalAmount',
          placeholder: '实付金额...',
          initialValue: 0,
          disabled: true
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '产品代码',
          dataIndex: 'PRODUCT_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '产品名称',
          dataIndex: 'PRODUCT_NAME',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车型代码',
          dataIndex: 'MODEL_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型名称',
          dataIndex: 'MODEL_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配置代码',
          dataIndex: 'PACKAGE_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配置名称',
          dataIndex: 'PACKAGE_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '单价',
          dataIndex: 'PRICE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '数量',
          dataIndex: 'COUNT',
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: true,
          editType: 'number',
          precision: 0,
          max: 1000,
          min: 0
        },
        {
          title: '政策折扣',
          dataIndex: 'POLICY_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '国补扣除',
          dataIndex: 'COUNTRY_SUBSIDE_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '地补扣除',
          dataIndex: 'AREA_SUBSIDE_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '特殊折扣',
          dataIndex: 'SPECIAL_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '折扣金额',
          dataIndex: 'AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '单车预估返利',
          dataIndex: 'DISCOUNT_MONEY',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '实付金额',
          dataIndex: 'TOTAL_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    delRowsHandle() {
      this.BaseTable.EXECUTE_DELETE();
    },
    closeDrawer() {
      this.$emit('close', false);
    },
    closeHandle(val) {
      this.visible = val;
    },
    formChangeHandle(val) {
      console.log(val);
    },
    changeHandle(rows) {
      this.BaseTable.EXECUTE_INSERT(rows);
    },
    async getData() {
      const res = await queryRebateAccounte({ dealerCode: 'GDB0100' });
      this.formList[10].initialValue = res.USE_AMOUNT;
    }
  },
  created() {
    this.getData();
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  }
};
</script>
